<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button id="addBtn">添加一条新的访客信息</button>
    <button id="btn1">删除选中</button>
    <button id="btn2">年龄从小到大</button>
    <!-- 序列号	姓名	年龄	操作 -->

    <table border="1" cellspacing="0" cellpadding="10">
      <thead>
        <tr>
          <th>序列号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
          <th>选择</th>
        </tr>

      </thead>
      <tbody></tbody>
    </table>

    <script>
      let info = [
        {
          name: "胡杭",
          age: 16,
        },
        {
          name: "胜明",
          age: 22,
        },
        {
          name: "军毅",
          age: 21,
        },
        {
          name: "晓华",
          age: 13,
        },
        {
          name: "盛聪",
          age: 23,
        },
        {
          name: "侦剑",
          age: 32,
        },
        {
          name: "红翔",
          age: 25,
        },
        {
          name: "超维",
          age: 18,
        },
        {
          name: "士琪",
          age: 22,
        },
        {
          name: "艳华",
          age: 20,
        },
      ];

      let tbody = document.querySelector("tbody");
      let addBtn = document.getElementById("addBtn");
      let delBtn = tbody.querySelectorAll("button");
      let btn1 = document.querySelector("#btn1");
      let btn2 = document.querySelector("#btn2");
      let checkboxs = document.getElementsByTagName("input");
      // let age =document.getElementsByTagName('tr');


      let index = 0; // 模拟点击下标(每次自增1)

      addBtn.onclick = function () {
        // console.log(index);
        // 当前index值要小于数组长度,否则会报错，获取不到数组的值
        if (index < info.length) {
          // 创建新的tr
          let newTr = document.createElement("tr");
          // 新的tr添加tr单元格
          newTr.innerHTML = `
                  <td>${index + 1}</td>
                  <td>${info[index].name}</td>
                  <td name='age'>${info[index].age}</td>
                  <td><button>删除</button></td>
                  <td><input type='checkbox' name='checkbox'></input></td>
                  `;
          //  将新的tr添加到tbody
          
          tbody.appendChild(newTr);

          // 删除单个信息
          delBtn = tbody.querySelectorAll("button");
          //   console.log(delBtn);
          // 每个删除按钮绑定点击事件
          delBtn.forEach(function (el) {
            el.onclick = function () {
              // el == this
              // console.log(this.parentElement.parentElement.remove());
              el.parentElement.parentElement.remove();
            };
          });
          // console.log("before", delBtn);
          // for (let i = 0; i < delBtn.length; i++) {
          //     delBtn[i].onclick = function () {
          //         delBtn[i].parentElement.parentElement.remove();
          //         console.log("after", delBtn);
          //     }
          // }
          age1.push(info[index]);

          // 添加完毕后自增
          index++;
        }
        

      };
      btn1.onclick = function () {
        for (let i = checkboxs.length-1; i >= 0 ; i--) {
          if (checkboxs[i].checked == true) {
            checkboxs[i].parentElement.parentElement.remove();
          }
        }
      };



      var age1 = [];
      // console.log(age1);
      
      
       
      btn2.onclick = function() {

        
      
      
    };
    </script>
  </body>
</html>
